<template>
  <div class="box jdlogin">
    <div class="header">
      <van-nav-bar
        title="京雷登录注册"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="conent">
      <van-form @submit="onSubmit1" v-if="loginMethod">
        <van-field
          v-model="tel"
          name="tel"
          clearable
          placeholder="请输入手机号"
          :right-icon="telTip"
          @input = 'smse'
        >
        </van-field>
        <van-field
          v-model="sms"
          name="sms"
          center
          clearable
          placeholder="请输入收到的验证码"
          :right-icon="smsTip"
        >
          <template #button>
            <van-button size="small" native-type="button" type="primary" class="getsms" @click="sendsms" :disabled = "getsms">{{yzmbtn}}</van-button>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit" :disabled = "submitctip1">
            登录
          </van-button>
        </div>
      </van-form>
      <van-form @submit="onSubmit2" v-else>
        <van-field
          v-model="userName"
          name="userName"
          clearable
          placeholder="用户名/手机号"
          :right-icon="userTip"
        >
        </van-field>
        <van-field
          v-model="passWord"
          :type="iseye ? 'text' : 'password'"
          name="passWord"
          center
          clearable
          placeholder="请输入密码"
          :right-icon="iseye ? 'eye-o' : 'eye'"
          @click-right-icon="iseye=!iseye"
        >
          <template #button>
            <van-button size="small" type="primary" native-type="button" class="getsms" @click="$router.push('forgetPsd')">忘记密码</van-button>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="danger" native-type="submit" :disabled ="submitctip2">
            登录
          </van-button>
        </div>
      </van-form>
      <div class="loginMethod">
        <div @click="qiehuan">
          <div v-if="loginMethod">账号密码登录</div>
          <div v-else>短信验证码登录</div>
        </div>
        <div @click="$router.push('jdregister')">注册</div>
      </div>
      <van-divider></van-divider>
      <p class="ysTip"><span>未注册的手机号验证后将自动创建京雷账号, </span>登录即代表您已同意<a href="##">京雷隐私政策</a></p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Divider, Toast, Dialog } from 'vant'
import { login, sendMsg, smslogin, getUser } from '../../api/index.js'
// import Cookies from 'js-cookie'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Divider)
Vue.use(Toast)
Vue.use(Dialog)

export default {
  data () {
    return {
      tel: '',
      sms: '',
      userName: '',
      passWord: '',
      loginMethod: true,
      iseye: false,
      yzmbtn: '获取验证码',
      t: '',
      s: 60,
      getsms: true
    }
  },
  methods: {
    qiehuan () {
      this.loginMethod = !this.loginMethod
      this.tel = ''
      this.sms = ''
      this.userName = ''
      this.passWord = ''
    },
    smse () {
      if (this.telTip === 'success') {
        this.getsms = false
      } else {
        this.getsms = true
      }
    },
    onSubmit1 () {
      smslogin({
        tel: this.tel,
        code: this.sms
      }).then(res => {
        console.log(res.data)
        switch (res.data.state) {
          case 201:
            Toast('请先发送验证码')
            break
          case 202:
            Toast('验证码不正确')
            break
          case 200:
            // Cookies.set('token', res.data.token)
            // Cookies.set('isLogin', 'ok')
            // Cookies.set('userId', res.data.id)
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('isLogin', 'ok')
            localStorage.setItem('userId', res.data.id)
            this.$store.commit('user/change_token', res.data.token)
            this.$store.commit('user/change_isLogin', 'ok')
            this.$store.commit('user/change_userId', res.data.id)
            Toast({
              message: '登录成功',
              onClose: () => {
                getUser({
                  userId: res.data.id
                }).then(res => {
                  if (res.data.data.password) {
                    if (this.$route.query.t) {
                      this.$router.push(this.$route.query.t)
                    } else {
                      this.$router.push('/home')
                    }
                  } else {
                    Dialog.confirm({
                      title: '',
                      confirmButtonText: '去设置',
                      cancelButtonText: '跳过',
                      confirmButtonColor: '#ffffff',
                      messageAlign: 'left',
                      message: '检测到您的账号未设置用户名和密码，为了您的账号安全，请尽快设置'
                    })
                      .then(() => {
                        this.$router.push('personal')
                      })
                      .catch(() => {
                        if (this.$route.query.t) {
                          this.$router.push(this.$route.query.t)
                        } else {
                          this.$router.push('/home')
                        }
                      })
                  }
                })
              }
            })
            break
        }
      })
    },
    onSubmit2 () {
      login({
        userName: this.userName,
        passWord: this.passWord
      }).then(res => {
        console.log(res.data)
        switch (res.data.state) {
          case 201:
            Toast('用户名或手机号未注册')
            break
          case 202:
            Toast('用户名与或手机号与密码不符')
            break
          case 200:
            // Cookies.set('token', res.data.token)
            // Cookies.set('isLogin', 'ok')
            // Cookies.set('userId', res.data.id)
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('isLogin', 'ok')
            localStorage.setItem('userId', res.data.id)
            this.$store.commit('user/change_token', res.data.token)
            this.$store.commit('user/change_isLogin', 'ok')
            this.$store.commit('user/change_userId', res.data.token)
            Toast({
              message: '登录成功',
              onClose: () => {
                if (this.$route.query.t) {
                  this.$router.push(this.$route.query.t)
                } else {
                  this.$router.push('/home')
                }
              }
            })
            break
        }
      })
    },
    sendsms () {
      this.getsms = true
      const that = this
      this.yzmbtn = this.s-- + 's后重新发送'
      this.t = setInterval(function () {
        if (that.s <= 0) {
          clearInterval(that.t)
          that.s = 60
          that.yzmbtn = '发送验证码'
          that.getsms = false
        } else {
          that.yzmbtn = that.s-- + 's后重新发送'
        }
      }, 1000)
      sendMsg({
        tel: this.tel
      }).then(res => {
        console.log(res.data)
        Toast('验证码发送成功')
      })
    }
  },
  computed: {
    userTip () {
      if (/^.{2,11}$/.test(this.userName)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    smsTip () {
      if (/^\d{4}$/.test(this.sms)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip () {
      if (/^\w{6,12}$/.test(this.passWord)) {
        return 'success'
      } else {
        return ''
      }
    },
    submitctip1 () {
      if (this.telTip && this.smsTip) {
        return false
      } else {
        return true
      }
    },
    submitctip2 () {
      if (this.userTip && this.passwordTip) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss">
.jdlogin{
  .header{
    .van-nav-bar__arrow{
      font-size: 24px;
      color: #000;
    }
    .van-nav-bar__title{
      font-szie: 18px
    }
    .van-hairline--bottom::after{
      border: none;
    }
  }
  .conent{
    .getsms{
      background: none;
      color: #888888;
      border: none;
      border-left: 1px solid #888888;
      width: 1rem;
      height: .23rem;
    }
    .van-field{
      height: .75rem;
    }
    .van-cell--center{
      align-items: flex-end;
    }
    .van-cell__value{
      display: flex;
      align-items: flex-end;
    }
    .van-field__body{
      width: 100%;
    }
    .loginMethod{
      display: flex;
      justify-content: space-between;
      padding: .1rem .2rem;
      color: #888888;
    }
    .van-divider{
      margin-top: 1rem;
    }
    .ysTip{
      padding: .1rem .2rem;
      text-align: center;
      color: rgba(0,0,0,.3);
      a{
        color: #4a90e2;
      }
    }
  }
}
</style>
